Using styles

Use styles to set the property values of one or more nodes of a certain type. In a style you set the values of properties the style applies to a node. For example, use a style to define the font type, size, and color of the text for all Text Block 3D nodes in your project.

To override a property defined in a style, add that property to the node to which the style applies.

Using styles you can:

Applying a style that applies to a node type in the selected scope

Target styles define the look and feel for a selected node type in a specific part of the scene graph in a Kanzi Studio project.

For example, to use different font sizes for the text at different levels of navigation, create a style for each navigation level, and add each style to the resource dictionary at each level of navigation.

To apply a style to descendants of a node type:

  1. In the Library press Alt and right-click Styles and select Target Style.
  2. In the Properties set the Target Type property to the node type for which you want to define a style.
    For example, set Target Type to Text Block 3D to define a style for Text Block 3D nodes in your project.
  3. In the Properties click , and add and set the properties you want to define with the style.
    For example, to define the color of font for a Text Block 3D node, add Font Color property and set it to red.
  4. In the Project press Alt and right-click the node to whose descendants you want to apply the style and select Resource Dictionary.
  5. In the Context Resources in the scope of the node to whose descendants you want to apply the style, click Add resource, select Add Existing, and select the style you created.
  6. If the properties you defined in the style exist in the target nodes, remove them from the target nodes so that the style can take effect.

Applying a style to selected instances of a node type

Named styles define the look and feel only for the selected instances of a node type, or override the target styles. For example, if you create a target style for the Text Block 3D, you can override that style with a named style.

To apply a style to only selected instances of a node type:

  1. In the Library press Alt and right-click Styles and select Named Style.
  2. In the Properties set the Target Type property to the node type for which you want to define a style.
    For example, set Target Type to Text Block 3D to define a style for Text Block 3D nodes in your project.
  3. In the Properties click , and add and set the properties you want to define with the style.
    For example, to define the color of font for a Text Block 3D node, add Font Color property and set it to red.

  4. In the Project select the node to the instance of which you want to apply the style, in the Properties click , add the Style property, and set it to a named style.

  5. If the properties you defined in the style exist in the target nodes, remove them from the target nodes so that the style can take effect.

See also

Using local and global resources

Resource management

Open topic with navigation